<template>
	<view class="integralShopList">
		<view class="bg_box"><image :src="imgConfig + 'images/index/integral_bg.png'" mode="widthFix" class="bg"></image></view>
		<Tabbar ref="tabbar"></Tabbar>
		<view class="tabs_box" :style="{'top': tabsTop + 'px'}">
			<scroll-view :scroll-x="true" :scroll-anchoring="true" class="tabs" >
				<view class="tab" :class="{'tabA':item.id==categoryId}" v-for="item in categoryList" :key="item.id"
					@click="categoryClick(item.id)">
					{{item.name}}
					<view class="hr"></view>
				</view>
			</scroll-view>
		</view>
		<view class="head_box" :style="{opacity: scrollTop}"></view>
		<view style="height: 48px;" ></view>
		<!-- 积分商品 -->
		<view class="product-box">
			<block v-if="productList.length > 0">
				<view class="list" :data-id="item.id" @tap="navToGoodsDetail" v-for="(item, index) in productList" :key="index">
					<view class="label">
						<image :src="item.listPicUrl" class="img"></image>
					</view>
					<view class="val">
						<view class="h1">{{item.name}}</view>
						<view class="h2">{{ item.sales||0 }}人付款</view>
						<view class="h3">
							<text class="text">会员价</text>￥{{ item.retailPrice }}<text style="padding-left:10rpx;color: #aaa;font-size: 20rpx;font-weight: normal;">+{{item.pointPrice}}积分</text><br/><text class="discount">￥{{ item.marketPrice }}</text>
						</view>
					</view>
				</view>
			</block>
			<view v-else-if="productList.length == 0">
				<tui-no-data style="margin-top: 0rpx;" :imgUrl="imgConfig + 'images/mall/my_course_empty.png'">暂无数据
				</tui-no-data>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#f7f7f7"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
	const util = require("@/utils/util.js");
	const app = getApp();
	import Tabbar from '@/components/tabbar/tab.vue'
	export default {
		name: '',
		components: {
			Tabbar
		},
		props: {

		},
		data() {
			return {
				imgConfig: util.domainImg,
				productList: [],
				categoryList: [],
				categoryId: '',
				current: 1,
				pages: '',
				loadding: false,
				pullUpOn: true,
				scrollTop: 0,
				tabsTop: 68,
			};
		},
		computed: {

		},
		watch: {

		},
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			let scrollTop = 0;
			if (e.scrollTop < 101 && e.scrollTop >= 0) {
				this.scrollTop = e.scrollTop/100
			} else {
				this.scrollTop = 1
			}
		},
		onLoad() {
			let _this = this;
			uni.getSystemInfo({
				success(res) {
					if (res.system == "iOS 14.4") {
						_this.tabsTop = 80;
					} else {
						_this.tabsTop = 68;
					}
				}
			})
		},
		onShow() {
			this.current = 1;
			this.getList();
			this.$nextTick(() => {
				app.globalData.tabName = '积分商品';
				this.$refs.tabbar.initInfo();
				this.getCategorys();
			})
		},
		onPullDownRefresh: function() {
			this.current = 1;
			this.pullUpOn = true;
			this.loadding = false;
			this.getList();
			uni.stopPullDownRefresh();
		},
		onReachBottom: function() {
			this.loadding = true;
			if (this.current == this.pages) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.getList(true);
				this.loadding = false;
			}
		},
		methods: {
			categoryClick(id) {
				this.categoryId = id;
				this.current = 1;
				this.getList();
			},
			getList(selet_type) {
				let that = this;
				let loadData;
				let ids = [];
				if (this.categoryId) {
					ids.push(this.categoryId)
				}
				that.pullUpOn = true;
				if (selet_type) {
					loadData = JSON.parse(JSON.stringify(that.productList));
					that.current = that.current + 1;
				}
				util.request('search/searchList', {
					searchFrom: util.getFromType(),
					pointGoods: 'pointGoods',
					current: that.current,
					categoryIds: ids
				}, 'POST').then(res => {
					if (res.code == 0) {
						that.productList = res.data.records
						that.pages = res.data.pages
						if (selet_type) {
							that.productList = loadData.concat(res.data.records);
						}
					}
				});
			},
			getCategorys() {
				let that = this;
				util.request('category/getOnSaleGoodsCategory', {
					level: 2
				}).then(function(res) {
					if (res.code === 0) {
						res.data.unshift({
							name: '全部',
							id: ''
						})
						that.categoryList = res.data
					}
				})
			},
			navToGoodsDetail: function(e) {
				uni.navigateTo({
					url: '/pages/goods/goods?id=' + e.currentTarget.dataset.id
				});
			},
		},
	};
</script>

<style lang="scss">
	.integralShopList {
		.bg_box {
			background: linear-gradient(180deg, #FFD08D, #FFFCF8);
			width: 100%;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: 0;
		}
		.bg {
			width: 100%;
			position: absolute;
			left: 0;
			top: -60rpx;
			z-index: 0;
		}
		.product-box {
			padding: 0 30rpx;
			position: relative;
			z-index: 1;
			.list {
				width: 100%;
				height: 240rpx;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				background-color: #fff;
				border-radius: 16rpx;
				overflow: hidden;
				margin-bottom: 20rpx;
				.label {
					width: 240rpx;
					height: 240rpx;
					flex-shrink: 0;
					margin-right: 20rpx;
					overflow: hidden;
					.img {
						width: 100%;
						height: 100%;
					}
				}
				.val {
					position: relative;
					.h1 {
						font-size: 28rpx;
						color: #111111;
						width: 400rpx;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
					.h2 {
						font-size: 26rpx;
						color: #AAAAAA;
						margin-top: 10rpx;
					}
					.h3 {
						font-size: 30rpx;
						font-weight: bold;
						color: #E62940;
						margin-top: 50rpx;
						.text {
							font-size: 22rpx;
						}
						.discount {
							font-size: 22rpx;
							color: #AAAAAA;
							font-weight: normal;
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}
	
</style>
